<template>
  <div>
    <div class="calender-container">
      <div class="left" @click="$emit('input', true)">
        <span>时间</span>
        <f7-icon f7="chevron_down"></f7-icon>
      </div>
      <div class="center" @click="$emit('input', true)">
        {{showDate || placeholder}}
      </div>
      <div class="right">
        <f7-link @click="handleSearch">查询</f7-link>
      </div>
    </div>
    <van-calendar
      v-bind="$attrs"
      v-on="$listeners"
      @select="handleSelect"
      @confirm="handleConfirm"
    />
  </div>
</template>

<script>
  import { Calendar } from 'vant'
  import Vue from 'vue';
  Vue.use(Calendar);
  export default {
    name: "date-picker",
    data() {
      return {
        showDate: '',
        dates: []
      }
    },
    props: {
      placeholder: {
        type: String,
        default: '请选择查询日期'
      }
    },
    methods: {
      handleSelect(date) {
        // console.log(date);
        if(!date[1]) {
          this.showDate = '';
          this.$emit('clear')
          this.dates = [];
        }

      },
      handleConfirm(date) {
        // console.log(this.$moment(date[0]).format('YYYY年MM月DD日'))
        this.showDate = this.$moment(date[0]).format('YYYY年MM月DD日') + '-' + this.$moment(date[1]).format('YYYY年MM月DD日')
        this.dates = [date[0].getTime() / 1000, date[1].getTime() / 1000];
      },
      handleSearch() {
        this.$emit('search', this.dates);
      }
    }
  }
</script>

<style scoped lang="scss">
  .calender-container {
    margin: 20px;
    height:61px;
    border: 1px solid $mainColor;
    border-radius:31px;
    display: flex;
    align-items: center;
    text-align: center;
    .left,.right {
      width: 120px;
      height: 100%;
      line-height: 61px;
    }
    .left {
      border-right: 1px solid $mainColor;
    }
    .right {
      border-left: 1px solid $mainColor;
    }
    .center {
      flex: 1;
    }
  }
</style>